<template>
  <div class="container-page container-page-banner">
    <el-form label-position="right" label-width="80px" size="mini">
      <el-form-item label="轮播图">
        <div class="item-upload-group">
          <el-image class="item-upload-image" :src="form.img" fit="cover">
            <div slot="error" class="image-slot">
              <div class="item-upload-image el-icon-upload" />
            </div>
          </el-image>
          <input class="item-input-file" type="file" @change="changeHandler">
        </div>
      </el-form-item>
      <el-form-item label="链接">
        <el-input v-model="form.link" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// api
import { createBanner } from '@/api/miva';
// utils
import { ossPutUpload } from '@/utils/upload_handler';
export default {
  data() {
    return {
      form: {
        img: '',
        link: ''
      }
    };
  },
  methods: {
    async submit() {
      console.log(this.form);
      const res = await createBanner(this.form);
      console.log(res);
      this.$message(res.message);
      if (res.code === 200) {
        this.$router.push('/banner/list');
      }
    },
    // input change事件处理器
    async changeHandler(evt) {
      const [file] = evt.target.files;
      const res = await ossPutUpload({ file });
      this.form.img = res.url || res.res.requestUrls[0].split('?')[0];
    },
    getPoster(data) {
      console.log(data);
      this.form.img = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.item-input-file {
  width: calc(1600px * 0.3);
  height: calc(900px * 0.3);
  display: block;
  border: 1px solid #ddd;
  position: relative;
  z-index: 2;
  opacity: 0;
}
.item-upload-group {
  height: calc(900px * 0.3);
  position: relative;
}
.item-upload-image {
  width: calc(1600px * 0.3);
  height: calc(900px * 0.3);
  border: 1px solid #ddd;
  position: absolute;
  top: 0;
  &::before {
    font-size: 60px;
    color: #ddd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
